﻿<html>
    <head>
        <title>Spionagezentrum - Die Ewigen Extension</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link   rel="stylesheet"    type="text/css"     href="graphics/degp3/f3.css">
    
        <script src="jquery/jquery-1.5.js"                      type="text/javascript"      charset="utf-8"></script>
        <script src="jquery/jquery.ewigen.js"                   type="text/javascript"      charset="utf-8"></script>
        <script src="jquery/jquery.ewigen.scanview.js"          type="text/javascript"      charset="utf-8"></script>
        <script src="jquery/jquery.tablesorter.js"              type="text/javascript"      charset="utf-8"></script>
        <script src="jquery/jquery.tablesorter.pager.js"        type="text/javascript"      charset="utf-8"></script>
        <script src="jquery/jquery.ewigen.config.sde.js"        type="text/javascript"      charset="utf-8"></script>


        <script type="text/javascript" charset="utf-8">
            
            $(document).ready(function() {
                if(localStorage["sde_ext_css"] != undefined) {
                    $("link").attr("href", localStorage["sde_ext_css"]);
                }

                //var data = $.ewigen.scanview.load();
                var data = $.ewigen.scanview.loadDummy();
                $.ewigen.scanview.fill(data);

                resizeBackground();

                /**
                 *  resize the background image to match the current window size
                 */
                $(window).resize(function() {
                    resizeBackground();
                });

                $.tablesorter.addParser({
                    // set a unique id
                    id: 'system',
                    is: function(s) {
                        // return false so this parser is not auto detected
                        return true;
                    },
                    format: function(s) {
                        var num  = parseInt(s.substring(0, s.indexOf(":")))*1000;
                            num += parseInt(s.substring(s.indexOf(":")+1, s.length));
                        return num;
                    },
                    type: 'numeric'
                });
                
                $("#tablesorter").tablesorter({
                    sortInitialOrder: "decs",       // desc is default sorting
                    sortList: [[0,0]],              // default sorting per system
                    sortMultiSortKey: "ctrlKey",    // strg will be used as multisort key
                    widthFixed: true,               // keep fixed table width
                    widgets: ['zebra'],
                    widgetZebra: {
                        css: ["cell", "cell1"]
                    },
                    // set some header sorting
                    headers: {
                        0: { sorter: 'system' },    // the system koordinates of the player
                        1: { sorter: 'text' },
                        2: { sorter: 'text' },
                        3: { sorter: 'text' },
                    }
                }).tablesorterPager({container: $("#pager")});
            });


            function resizeBackground() {
                var width       = $(window).width();
                var height      = $(window).height();

                var BASE_RATIO  = 0.75;

                var curRatio    = height/width;

                //-webkit-background-size: 100% 100%, auto;
                if(curRatio <= BASE_RATIO) {
                    height  = width * BASE_RATIO;
                }
                else {
                    width   = height / BASE_RATIO;
                }
                $("body").css("-webkit-background-size", width + "px " + height + "px, auto");
            }
            
            
        </script>
    </head>
    
    <body>

        <br/><br/><br/>
        <center>
        <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
        <tr align="center">
            <td width="13" height="37" class="rol">&nbsp;</td>
            <td align="center" class="ro" width="800"><div class="cellu">Spionagezentrum - Gespeicherte Daten</div></td>
            <td width="13" class="ror">&nbsp;</td>
        </tr>
        <tr align="center">
            <td class="rl">&nbsp;</td>
            <td>

                <table width="100%" border="0" cellpadding="0" cellspacing="1" id="tablesorter">
                <thead>
                <tr>
                    <td class="cellu" rowspan="2" align="center">System</td>
                    <td class="cellu" rowspan="2" align="center">Name</td>
                    <td class="cellu" rowspan="2" align="center" width="38">R</td>
                    <td class="cellu" rowspan="2" align="center">Allianz</td>
                    <td class="cellu" rowspan="2" align="center">Kollis</td>
                    <td class="cellu" rowspan="2" align="center" width="100">Punkte</td>
                    <td class="cellu" colspan="2" align="center" width="150">Schiffe</td>
                    <td class="cellu" colspan="2" align="center" width="150">Verteidigungsanlagen</td>
                </tr>
                <tr>
                    <td class="cellu" width="75" align="center">Anzahl</td>
                    <td class="cellu" width="75" align="center">Punkte</td>
                    <td class="cellu" width="75" align="center">Anzahl</td>
                    <td class="cellu" width="75" align="center">Punkte</td>
                </tr>
                <tr>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                    <th class="cellu" align="center">
                        <a href="#"><img src="graphics/degp3/g/3_godown.gif" alt="Absteigend"></a>
                        <a href="#"><img src="graphics/degp3/g/3_goup.gif" alt="Aufsteigend"></a>
                    </th>
                </tr>
                </thead>
                <tbody id="scanlist">
                    
                </tbody>
                </table>

            </td>
            <td class="rr">&nbsp;</td>
        </tr>
        <tr>

            <td class="rl">&nbsp;</td>
            <td>
                <table width="100%" border="0" cellpadding="0" cellspacing="1">
                <tbody>
                <tr>
                    <td class="cellu" align="center" valign="center">
                        <div id="pager">
                        &nbsp;
                        <img src="graphics/degp3/g/3_goback.gif" class="prev"/>
                        &nbsp;
                        <input type="text" class="pagedisplay" size="5" style="text-align: center;"/>
                        &nbsp;
                        <img src="graphics/degp3/g/3_gonext.gif" class="next"/>
                        &nbsp;
                        <select class="pagesize">
                            <option value="10">10</option>
                            <option value="20" selected="selected">20</option>
                            <option value="30">30</option>
                        </select>
                        </div>
                    </td>
                </tr>
                </tbody>
                </table>
            </td>
            <td class="rr">&nbsp;</td>

        </tr>
        <tr align="center">
            <td class="rl">&nbsp;</td>
            <td>
                <br/><br/>
                <table width="100%" border="0" cellpadding="0" cellspacing="1">
                <thead>
                <tr>
                    <td class="cellu" colspan="2" align="center">Filter</td>
                </tr>
                </thead>
                <tbody id="scanlist">
                <tr>
                    <td class="cell1">&nbsp;Rasse</td>
                    <td class="cell1">
                        <input type="checkbox" class="c" checked>E&nbsp;
                        <input type="checkbox" class="c" checked>I&nbsp;
                        <input type="checkbox" class="c" checked>K&nbsp;
                        <input type="checkbox" class="c" checked>Z&nbsp;
                        <input type="checkbox" class="c" >D&nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="cell">&nbsp;Kollektoren</td>
                    <td class="cell">
                        <select>
                            <option>weniger als</option>
                            <option>gleich</option>
                            <option selected>größer als</option>
                        </select>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td class="cell1">&nbsp;Punkte</td>
                    <td class="cell1">
                        <select>
                            <option selected>weniger als</option>
                            <option>gleich</option>
                            <option>größer als</option>
                        </select>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td class="cellu" colspan="2" align="center"><input type="button" value="update">&nbsp;<input type="button" value="reset"></td>
                </tr>
                </tbody>
                </table>

            </td>
            <td class="rr">&nbsp;</td>
        </tr>
        <tr>
            <td class="rul">&nbsp;</td>
            <td class="ru">&nbsp;</td>
            <td class="rur">&nbsp;</td>
        </tr>
        </tbody>
        </table>
        </center>
        
    </body>
</html>